<template>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>直播</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card>
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">在线直播</h3>

        <div class="demo-image__placeholder">
          <div class="block">

            <el-image src="http://localhost:8082/commodity/直播.jpg"></el-image>
          </div>
        </div>
      </el-card>


      <el-card style="margin-top: 30px">
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">用户操作区域</h3>

        <el-row>

          <el-button type="danger" @click="likes" :disabled="disabled">点赞</el-button>
          <el-button type="warning" @click="share">分享</el-button>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-select v-model="selectGiftId" clearable placeholder="请选择礼物" >

              <el-option v-for="r in giftList" :label="r.giftname" :value="r.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="1">
            <el-button type="success" @click="addgift">打赏</el-button>
          </el-col>
        </el-row>
      </el-card>


      <el-card style="margin-top: 30px">
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">用户评论</h3>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input
                placeholder="请输入内容"
                v-model="input"
                clearable>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addComment">评论</el-button>
          </el-col>
        </el-row>

        <el-table
            :data="commentList"
            stripe
            style="width: 100%">

          <el-table-column
              prop="username"
              label="姓名"
              width="350">
          </el-table-column>
          <el-table-column
              prop="commentcontent"
              label="评论内容"
              width="550">
          </el-table-column>
        </el-table>


        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10 , 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </el-card>


      <!--      购买礼物-->

      <el-card style="margin-top: 30px">
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">礼物购买</h3>

        <el-table :data="gift"  border stripe >
          <el-table-column type="index"></el-table-column>

          <el-table-column label="礼物名称" prop="giftname"></el-table-column>
          <el-table-column label="礼物价格" prop="giftprice"></el-table-column>
          <el-table-column label="购买">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="buyGift(scope.row.id)">购买</el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="pageNum2"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
        ></el-pagination>-->

      </el-card>


      <!--      购买商品-->
      <el-card style="margin-top: 30px">

        <el-table :data="commodityList"  ref="commodityList"  border stripe  @selection-change="">
          <el-table-column type="selection" width="60" >
          </el-table-column>
          <el-table-column type="index"></el-table-column>
          <el-table-column label="商品封面">
            <template slot-scope="scope">
              <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="commodityname"></el-table-column>
          <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
          <el-table-column label="套餐内单品数量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stock" @blur="getPriceOld"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="pageNum1"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
        ></el-pagination>



        <el-button type="primary" @click="sendCommodityTest">购买商品</el-button>

      </el-card>




    </div>
</template>

<script>
    export default {
      name: "WelCome",

      data() {
        return {
          numlist:[],
          disabled:false,
          USER: {},
          selectGiftId: '',
          giftList: '',
          readyList:[],//选择商品的id
          readyList1:[],
          commodityList: [],//查出来的商品列表
          input: '',
          //评论分页
          pageNum: 1,
          pageSize: 10,
          total:0,
          //礼物分页
        /*  pageNum2: 1,
          pageSize2: 10,
          total2:0,*/
          gift: '',
          //商品分页
          pageNum1: 1,
          pageSize1: 10,
          total1:0,
          iurl: this.$MyUrl.imgUrl+'commodity/',//图片地址
          priceOld:0,
          commentList:[],
          num:1,
          sendCommodity:[],
          sendCommodityForm: {
            id:'',
            num:"",
          },
          liveID:'',
          UserID:'',
          UserName:'',
          addCommentForm: {
            userid:'',//可能要改
            username:"test",//可能要改
            commentcontent:'',
            liveid:'',
          },
          likeForm: {
            uid:'',//可能要改
            username:"",//可能要改
            growthValue:'',
            beiZhu:'无',
          }
          ,
          test:[],//要发送商品的id数组
          test2:[],//要发送商品的num数量数组
          test3:[],//要发送商品的price价格数组

        }
      },

      methods:{

        TEST(){
          //循环得到input里输入的数量
          this.commodityList.forEach(value => {
            if (value.stock === undefined){
              return;
            }
            this.numlist.push(value.stock)
          })

          //循环将已勾选的商品，id，价格，数量剥离除三个新数组
          for (let i = 0; i < this.$refs.commodityList.selection.length; i++) {
            this.test.push(this.$refs.commodityList.selection[i].id)

            let j=this.test[0];
            this.test2.push(this.numlist[this.$refs.commodityList.selection[i].id-j])

            this.test3.push(this.$refs.commodityList.selection[i].commodityprice)
          }
          //循环将三个新数组赋给要发送的对象
          for (let i = 0; i < this.test.length; i++) {
            const sendCommodityForm = {
              id:'',
              num:"",
              commodityprice:'',
            }
            sendCommodityForm.id=this.test[i];
            sendCommodityForm.num=this.test2[i];
            sendCommodityForm.commodityprice=this.test3[i];
            this.sendCommodity.push(sendCommodityForm);
          }
          console.log(this.test)
          console.log(this.test2)

          //带参数跳转页面
          if(this.test.length != 0   ){
            if( this.test2.length != 0  ){

              //进行一个页面带参的跳



            }else {
              this.$message({
                type: "error",
                message: "请输入商品数量",
                duration: 1000
              })
            }
          }else {
            this.$message({
              type: "error",
              message: "请勾选商品",
              duration: 1000
            })
          }

          console.log(this.test)
          console.log(this.test2)
          this.test=[];
          this.test2=[];
          this.test3=[];
          this.numlist=[];
          this.sendCommodity=[];
        },

        //提交商品
        sendCommodityTest(){
          //循环得到input里输入的数量
              this.commodityList.forEach(value => {
            if (value.stock === undefined){
              return;
            }
            this.numlist.push(value.stock)
          })

          //循环将已勾选的商品，id，价格，数量剥离除三个新数组
          for (let i = 0; i < this.$refs.commodityList.selection.length; i++) {
            this.test.push(this.$refs.commodityList.selection[i].id)

            //this.test2.push(this.numlist[this.$refs.commodityList.selection[i].id-1])
            if(this.test.length==0){
              this.test2.push(this.numlist[0])
            }else {
              this.test2.push(this.numlist[this.$refs.commodityList.selection[i].id-1])
            }


            this.test3.push(this.$refs.commodityList.selection[i].commodityprice)
          }
          //循环将三个新数组赋给要发送的对象
          for (let i = 0; i < this.test.length; i++) {
            const sendCommodityForm = {
              id:'',
              num:"",
              commodityprice:'',
            }
            sendCommodityForm.id=this.test[i];
            sendCommodityForm.num=this.test2[i];
            sendCommodityForm.commodityprice=this.test3[i];
            this.sendCommodity.push(sendCommodityForm);
          }
          console.log(this.test)
          console.log(this.test2)

          //带参数跳转页面
          if(this.test.length != 0   ){
            if( this.test2.length != 0  ){

              //进行一个页面带参的跳
              this.sendPage();



            }else {
              this.$message({
                type: "error",
                message: "请输入商品数量",
                duration: 1000
              })
            }
          }else {
            this.$message({
              type: "error",
              message: "请勾选商品",
              duration: 1000
            })
          }

          console.log(this.test)
          console.log(this.test2)
          this.test=[];
          this.test2=[];
          this.test3=[];
          this.numlist=[];
          this.sendCommodity=[];
        },


        //打赏按钮
        addgift(){

          if( this.giftList.length != 0  ){


            if(this.selectGiftId!=''){
              let url = "comment/gift"
              this.$axios.get(url, {
                params: {
                  GiftId:this.selectGiftId,
                  userid:this.UserID,
                  liveid:this.liveID
                }
              }).then(res => {
                if (res.data.code = 200) {
                  this.$message({
                    type: "success",
                    message: "打赏成功",
                    duration: 1000
                  })
                  this.selectGiftId='';
                  this.reloadData();

                } else {
                  this.$message({
                    type: "error",
                    message: "打赏失败",
                    duration: 1000
                  })
                }
              })}else {
              this.$message({
                type: "error",
                message: "请选择一个礼物",
                duration: 1000
              })
            }




          }else {
            this.$message({
              type: "error",
              message: "请先购买礼物",
              duration: 1000
            })
          }


        },
        //分享按钮
        share(){
          this.likeForm.uid=this.UserID;
          this.likeForm.username=this.UserName;
          let url = "comment/share"
          this.$axios.post(url,this.likeForm).then(res => {
            if (res.data.code = 200) {
              this.$message({
                type: "success",
                message: "分享成功",
                duration: 1000
              })
              this.reloadData();

            } else {
              this.$message({
                type: "error",
                message: "分享失败",
                duration: 1000
              })
            }
          })

        },
        //点赞按钮
        likes(){
          this.likeForm.uid=this.UserID;
          this.likeForm.username=this.UserName;
          let url = "comment/likes"
          this.$axios.post(url,this.likeForm).then(res => {
            if (res.data.code = 200) {
              this.$message({
                type: "success",
                message: "点赞成功",
                duration: 1000
              })
              this.reloadData();
              this.disabled=true;//点完赞后禁用按钮
            } else {
              this.$message({
                type: "error",
                message: "点赞失败",
                duration: 1000
              })
            }
          })

        },
        //查评论列表分页
        handleSizeChange(newSize) {
          this.pageSize = newSize;
          this.getCommentList();
        },
        //查评论列表分页
        handleCurrentChange(newPage) {
          this.pageNum = newPage;
          this.getCommentList();
        },
        //查评论列表
        getCommentList() {
          let url = "comment/Commentlist";
          this.$axios.get(url, {
            params: {
              liveID:this.liveID,
              now: this.pageNum,
              size: this.pageSize
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.commentList = res.data.data.list;
              this.pageNum = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          });
        },
        //新增评论
        addComment(){

          this.addCommentForm.commentcontent=this.input;
          this.addCommentForm.liveid=this.liveID;
          this.addCommentForm.userid=this.UserID;

          let url = "comment/add"
          this.$axios.post(url, this.addCommentForm).then(res => {
            if (res.data.code = 200) {
              this.$message({
                type: "success",
                message: "发布评论成功",
                duration: 1000
              })
              this.reloadData();
            } else {
              this.$message({
                type: "error",
                message: "发布评论失败",
                duration: 1000
              })
            }
          })
        },


        //选择商品的id
        idChance(selection){
          this.readyList =[];
          for(let o of selection){
            this.readyList.push(o);
          }
        },
        handleCurrentChange1(newPage) {
          this.pageNum1 = newPage;
          this.getCommodityList();
        },
        handleSizeChange1(newSize) {
          this.pageSize1 = newSize;
          this.getCommodityList();
        },
        //选择数量框
        getPriceOld(){
          this.priceOld = 0;
          this.commodityList.forEach(value => {
            if (value.stock === undefined){
              return;
            }
            this.priceOld = this.priceOld + (value.commodityprice)*(value.stock);
          })
        },


        //查礼物列表分页
        handleSizeChange2(newSize) {
          this.pageSize2 = newSize;
          this.getGift();
        },
        //查礼物列表分页
        handleCurrentChange2(newPage) {
          this.pageNum2= newPage;
          this.getGift();
        },
        //购买礼物
        buyGift(Giftid){
          let url = "gift/buyGift"
          this.$axios.get(url, {
            params: {
              GiftId:Giftid,
              userid:this.UserID,
            }
          }).then(res => {
            if (res.data.code = 200) {
              this.$message({
                type: "success",
                message: "打赏成功",
                duration: 1000
              })
              this.selectGiftId='';
              this.reloadData();
            } else {
              this.$message({
                type: "error",
                message: "打赏失败",
                duration: 1000
              })
            }
          })
        },

        //得到打赏礼物本身列表
        getGift() {
          let url = "gift/gift";
          this.$axios.get(url).then(res => {
            if (res.data.code == 200) {
              this.gift = res.data.data;

            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          });
        },

        //得到用户打赏礼物列表
        getGiftList() {
          let url = "gift/giftlist";
          this.$axios.get(url, {
            params: {
              userid:this.UserID,
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.giftList = res.data.data;
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          });
        },
        //根据名字查列表
        getCommodityList() {
          let url = "commodity/clist";
          this.$axios.get(url, {
            params: {
              name: this.commodityname,
              now: this.pageNum1,
              size: this.pageSize1
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.commodityList = res.data.data.list;
              this.pageNum1 = res.data.data.pageNum;
              this.pageSize1 = res.data.data.pageSize;
              this.total1 = res.data.data.total;
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          });

        },
        //接到上一个页面的参数
        getPage(){
          let jsonStr = sessionStorage.getItem("user");
          console.log(jsonStr)
          if (jsonStr){
            this.USER = JSON.parse(jsonStr);
            this.UserID=this.USER.id;

          }
          this.UserName = this.USER.username;
          this.liveID= this.$route.query.liveId


        },
        //传到一个页面的参数
        sendPage(){
          this.$router.push({
            path: "/page4/",
            query: {
              liveId: this.liveID,
              Commodity:this.sendCommodity
            }
          })
        },

        reloadData() {
          this.getPage();
          this.getCommentList();
          this.getGiftList();
          this.getCommodityList();
          this.getGift();

        }
        },
      created() {


        this.reloadData();
      }
    }
</script>

<style scoped>

</style>